<template>
	<view class="">
		<view class="invite-bj"></view>
		<view class="inviteBg">
			<view class="status_bar"></view>
			<view class="inviteBg-head flex pl-30 pr-30">
				<u-icon name="arrow-left" size="40" class='backIcon' color='#fff' @click="back"></u-icon>
				<view class="white size-36">分享好友</view>
				<view class="right"></view>
			</view>
			<!-- 轮播图 -->
			<view class="mt-60 mb-60" style="position: relative;">
				
				<swiper @change="changeCurrent" circular class="swiper" previous-margin="112rpx" next-margin="73rpx">
					<swiper-item v-for="(item,index) in info.images" :key="index">
						<view class="swiper-item">
							<!-- #ifdef H5 -->
							<image :src="imgUrl" mode=""></image>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="swiper-item-img">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="swiper-item-main flex1 flex-start flex-middle">
								<image :src="info.qr_code_image" mode="aspectFill"></image>
								<view class="txt">邀请码：{{ info.uuid }}</view>
							</view>
							<!-- #endif -->
							
							
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 轮播图点 -->
			<view class="swiper-ul flex1 flex-middle flex-center">
				<view class="swiper-ul-dot" :class="{active:index == current}" v-for="(item,index) in info.images"
					:key="index"></view>
			</view>
			<!-- 底部分享 -->
			<!--  -->
			<!-- #ifdef APP-PLUS -->
			<view class="invite-footer mt-40 flex1 flex-center">
				<view class="invite-footer-li flex1 flex-middle" v-for="(item,index) in shareList" :key="index"
					@click="share(item.type)">
					<image :src="item.image" mode=""></image>
					<view class="size-24 white">{{ item.name }}</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- position: fixed;left: 10000px;top: 10000px; -->
		<!-- 	<view class="">
				<image  v-for="(item,index) in imgList" :key="index" style="width: 524rpx;height: 416px;position: fixed;left: 56px;right: 50px;top: 74px;z-index: 998;" :src="imgUrl" mode=""></image>
			</view> -->
			<!-- <image v-if="true" style="width: 524rpx;height: 416px;position: fixed;left: 56px;right: 50px;top: 74px;z-index: 998;" :src="imgUrl" mode=""></image> -->
			<!-- position: fixed;left: 10000px;top: 10000px; -->
			<canvas canvas-id="myCanvas" id="myCanvas" style="width: 524rpx;height: 830px;position: fixed;left: 10000px;top: 10000px;" width="524" height="830"></canvas>
			<!-- <canvas canvas-id="myCanvas" style="width: 524rpx;height: 830px;position: fixed;left: 10000px;top: 10000px;" width="524" height="830"></canvas> -->
			<!-- <view class="inviteCon white ">
				<view class="">
					<view class="size-26">
						邀请码
					</view>
					<view class="size-40 mt-20 mb-40" style="color:#F9E1C2">
						{{info.uuid}}
					</view>
				</view>
				<image :src="info.qr_code_image" class="inviteImg radius-30"></image>
				<u-button type="primary" class="mt-80" @click="toShare" hover-class="none">分享</u-button>
			</view> -->

		</view>
	</view>
</template>

<script>
	import html2canvas from '@/common/html2canvas.min.js';
	export default {
		data() {
			return {
				info: {},
				current: 0, //
				shareList: [
					// {
					// 	name: '微信',
					// 	image: '/static/mine/wx.png',
					// 	type: 1
					// },
					// {
					// 	name: '朋友圈',
					// 	image: '/static/mine/Circle.png',
					// 	type: 2
					// },
					{
						name: '保存海报',
						image: '/static/mine/poster.png',
						type: 3
					}
				],
				imgUrl:'',
				showCanvas: false,
				imgList: [],
			}
		},
		onLoad({uuid}) {
			if (!uni.getStorageSync('token')) return uni.redirectTo({
				url:'/pages/login/register?uuid=' + uuid
			})
			this.getfenXiang()
		},
		methods: {
			async creatPoster() {
				let ratio = 750 / uni.getSystemInfoSync().windowWidth
				uni.showLoading({
					title: '海报生成中'
				})
				var ctx = uni.createCanvasContext('myCanvas')
				ctx.crossOrigin = "anonymous";
				
				ctx.clearRect(0, 0, 262, 415) //清空之前的海报
							
				ctx.draw() //清空之前的海报
				
				await this.drawSquarePic(ctx, 0, 0, 262, 415, 4, '', '#FFFFFF');
							
				await this.drawSquarePic(ctx, 15, 15, 232, 311, 10, this.info.images[this.current].image);
				await this.drawSquarePic(ctx, 15, 341,60, 60, 0, this.info.qr_code_image);
				
				
							
				
				await this.drawTextReturnH(ctx, '邀请码：' + (this.info.uuid ? this.info.uuid : ''), 85, 375,210, 15,
					'#37DC6D', '', 1, 2)
				
					// #ifdef H5
					setTimeout(()=> {
						uni.canvasToTempFilePath({
								x:0,
								y:0,
								canvasId: 'myCanvas',
								width:262,
								height:415,
								quality:1,
								success: (res) => {
									this.imgUrl = res.tempFilePath
								},
								fail: function(err) {
										console.log(err)
								}
						})
						
					},300)
					// #endif
				
				uni.hideLoading()
			},
			getfenXiang() {
				this.$http('api/Newapi/fenXiang').then(res => {
					this.info = res;
					this.creatPoster()
				})
			},
			share(type) {
				if (type != 3) {
					uni.share({
						provider: "weixin",
						scene: type == 1 ? "WXSceneSession" : 'WXSceneTimeline',
						type: 1,
						summary: this.info.register_url,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.showLoading({
						title: '图片保存中'
					})
					let ratio = 750 / uni.getSystemInfoSync().windowWidth
					uni.canvasToTempFilePath({
							x:0,
							y:0,
							canvasId: 'myCanvas',
							width:262,
							height:415,
							quality:1,
							success:(res)=> {
								//保存图片至相册
								// #ifndef H5
								// 除了h5以外的其他端
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success(res) {
										this.flag = true
										uni.hideLoading()
										uni.showToast({
											title: '图片保存成功，可以去分享啦~',
											duration: 2000,
											icon: 'none'
										})
									},
									fail() {
										uni.showToast({
											title: '保存失败，稍后再试',
											duration: 2000,
											icon: 'none'
										})
										uni.hideLoading()
									}
								})
								// #endif
					
								// #ifdef H5
								// h5的时候
								uni.showToast({
									title: '请长按保存',
									duration: 3000,
									icon: 'none'
								})
								// #endif
							},
							fail(res) {
								uni.showToast({
									title: '保存失败，稍后再试',
									duration: 2000,
									icon: 'none'
								})
								uni.hideLoading()
							}
						},
						this
					)
				}
			},
			changeCurrent(e) {
				this.current = e.detail.current
				
				setTimeout(()=> {
					
					this.creatPoster()
					
				},300)
			},
			back() {
				uni.navigateBack()
				// uni.switchTab({
				// 	url: './index'
				// })
			},
			toShare() {
				let that = this;
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: that.info.register_url,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '邀请链接复制成功，快去分享吧!',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$copyText(that.info.register_url).then(function(e) {
					uni.showToast({
						title: "邀请链接复制成功，快去分享吧!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
			drawSquarePic(ctx, x, y, w, h, r, url, color) {
				ctx.save()
				ctx.beginPath()
				// 绘制左上角圆弧
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				// 绘制border-top
				// 画一条线 x终点、y终点
				ctx.lineTo(x + w - r, y)
				// 绘制右上角圆弧
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				// 绘制border-right
				ctx.lineTo(x + w, y + h - r)
				// 绘制右下角圆弧
				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
				// 绘制左下角圆弧
				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
				// 绘制border-left
				ctx.lineTo(x, y + r)
				// 填充颜色(需要可以自行修改)
				ctx.setFillStyle(color)
				ctx.fill()
				// 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
				ctx.clip()
				// 绘制图片
				return new Promise((resolve, reject) => {
					if (url) {
						uni.getImageInfo({
							src: url,
							success(res) {
								ctx.drawImage(url, x, y, w, h)
								ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用
								ctx.draw(true)
								resolve()
							},
							fail(res) {
								uni.showToast({
									title: '请检查网络',
									duration: 2000,
									icon: 'none'
								})
							}
						})
					} else {
						ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用
						ctx.draw(true)
						resolve()
					}
				})
			},
			drawTextReturnH(
				ctx,
				text,
				x,
				y,
				maxWidth = 200,
				fontSize = 14,
				color = '#333333',
				lineHeight = 1,
				textAlign = 'left',
				index
			) {
				let arrText = text.split('')
				let line = ''
			
				ctx.font = index == 0 ? 'normal bold ' + fontSize + 'px PingFang SC' : fontSize +
					'px PingFang SC' //设置字体大小，注意：百度小程序 用ctx.setFontSize设置字体大小后，计算字体宽度会无效
				ctx.setFillStyle(color) //设置字体颜色
				var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
				var temp = "";
				var row = [];
				for (var a = 0; a < chr.length; a++) {
					if (ctx.measureText(temp).width < maxWidth) {
						temp += chr[a];
					} else {
						a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
						row.push(temp);
						temp = "";
					}
				}
				row.push(temp);
				if (row.length == 1) {
			
					ctx.fillText(index == 1 ? text.substring(0, 4) + (text.length > 4 ? '...' : '') : text, x, y)
			
				} else {
			
					ctx.fillText(index == 1 ? row[0].substring(0, 4) + (row[0].length > 4 ? '...' : '') : row[0], x, y);
				}
				ctx.draw(true)
				// ctx.draw(
				// 	true) //本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。
				// return y
			},
		}
	}
</script>

<style lang="less" scoped>

	.inviteBg-head {
		height: 44px;
	}

	.right {
		width: 40rpx;
		height: 40rpx;
	}

	.swiper-item {
		width: 524rpx;
		height: 830rpx;
		display: flex;
		/* #ifdef APP-PLUS */
		padding: 30rpx 0;
		/* #endif */
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 20rpx;
		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.swiper-item-main {
		width: 524rpx;
		padding: 0 30rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 30rpx;
		}

		.txt {
			background: linear-gradient(0deg, #34D1F9 0%, #37DC6D 98.1201171875%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.swiper-item-img {

		image {
			width: 464rpx;
			height: 622rpx;
		}
	}

	.swiper {
		height: 830rpx;
	}

	.invite-bj {
		position: fixed;
		z-index: 0;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: url('@/static/mine/invite-bj.png') no-repeat;
		background-size: cover;
	}

	.inviteBg {

		width: 100%;
		height: 100vh;
		position: relative;
	}

	.swiper-ul-dot {
		width: 12rpx;
		height: 12rpx;
		background: #FFFFFF;
		border-radius: 50%;
		margin-right: 20rpx;

		&:last-child {
			margin-right: 0;
		}
	}

	.swiper-ul-dot.active {
		background: linear-gradient(0deg, #EEA634 0%, #DE2D32 100%);
	}

	.invite-footer-li {
		flex-direction: column;
		margin-right: 70rpx;

		&:last-child {
			margin-right: 0;
		}

		image {
			width: 92rpx;
			height: 92rpx;
			margin-bottom: 20rpx;
		}
	}

	.inviteCon {

		// position: absolute;
		// z-index: 10;
		// left:50%;
		// transform: translateX(-50%);
		// top:40%;
		// text-align: center;
		uni-image {
			width: 380rpx;
			height: 380rpx;
			background: #666;
		}
	}
</style>
